<template>
    <div id="disposal-center">
        <!-- chart层 -->
        <div class="chart-bar flex">
            <el-card class="flex2 marquee">
                <!-- <table>
                    <thead>
                        <tr>
                            <th style="width: 60%">产品名称</th>
                            <th style="width: 40%">当前超限指标</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="i in marqueeList" :key="i.productCode">
                            <td style="width: 60%">{{ i.productCode + '(' + i.productName + ')' }}</td>
                            <td class="num underline" style="width: 40%" @click="handleProduct(i.productCode)">{{ i.value }}</td>
                        </tr>
                    </tbody>
                </table> -->
                <el-table :data="marqueeList" border :header-row-style="{ height: '40px' }" style="width: 100%" height="100%" highlight-current-row>
                    <el-table-column prop="productName" label="产品名称" min-width="80px" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="value" label="当前超限指标" align="center">
                        <template slot-scope="scope">
                            <span class="num underline" @click="handleProduct(scope.row.productCode)">{{ scope.row.value }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="flex6 bar">
                <h3 class="title">
                    <!-- <i class="circle-icon"></i> -->
                    <span>待调整超限指标</span>
                </h3>
                <div class="title-right">
                    <div class="total-num">
                        {{ `超限汇总：${thousandsFormat(overrunTotal)} ` }}
                    </div>
                    <!-- <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                        <i style="z-index: 10" class="el-icon-refresh-right" @click="getTableMenuData"></i>
                    </el-tooltip> -->
                </div>
                <div style="height: calc(100% - 50px)">
                    <BarChart ref="barchart" :data="barData" @handleBarClick="handleBarClick" />
                </div>
            </el-card>
            <el-card class="flex3 bar">
                <h3 class="title">
                    <!-- <i class="circle-icon"></i> -->
                    <span>超限天数分布</span>
                </h3>

                <div style="height: calc(100% - 24px)">
                    <BarChart2 ref="barchart2" :data="barData2" @handleBarClick="handleBarClick2" />
                </div>
                <!-- <div style="height: 100%">
                    <BarChart ref="menuBarChart" chartName="menu" :date="queryForm" :data="menuChartData" :isDetail="false" />
                </div> -->
            </el-card>
        </div>
        <!-- searchBar -->
        <div class="search-bar">
            <el-form label-width="100px" style="width: 100%">
                <div class="flex">
                    <div class="flex10">
                        <el-form-item label="产品代码/名称:">
                            <el-select v-model="searchParams.fundProductCode" filterable multiple collapse-tags clearable size="mini">
                                <!-- <el-option v-for="i in fundStorage" :key="i.fundCode" :label="i.fundCode + ' ' + i.fundName" :value="i.fundCode">
                                </el-option> -->
                                <el-option
                                    v-for="i in computedFundStorage"
                                    :key="i.fundProductCode"
                                    :label="i.fundProductCode + ' ' + i.fundName"
                                    :value="i.fundProductCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex10">
                        <el-form-item label="连续超限天数:">
                            <span style="width: 20px">≥</span>
                            <el-input
                                v-model="searchParams.prohibitionDate"
                                style="max-width: calc(100% - 5% - 60px); margin-left: 5%"
                                size="mini"
                                type="number"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex10">
                        <el-form-item label="超限事件分布:">
                            <el-select v-model="searchParams.adjustProgerss" multiple collapse-tags clearable size="mini">
                                <el-option v-for="i in adjustStorage" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey"> </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex12">
                        <el-button @click="handleSearchClick" type="primary" size="mini" icon="el-icon-search">查询</el-button>
                        <el-button @click="handleExport" size="mini">导出</el-button>
                        <div class="separator"></div>
                        <el-button size="mini" @click="layoutDialog = true">布局设置</el-button>
                        <!-- <el-button @click="getOverrunEventList" size="mini">刷新</el-button> -->
                        <el-button @click="handleReset" size="mini">重置</el-button>
                    </div>
                </div>
            </el-form>
        </div>
        <!--  -->
        <RiskTable
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="showColumns"
            :paging="paging"
            :searchParams="searchParams"
            v-loading="tableLoading"
            :key="tableKey"
            style="height: calc(100% - 35% - 60px)"
            @page-change="getOverrunEventList"
            :cell-style="cellStyle"
        >
            <template #prohibitionDate="{ row }">
                <el-tag size="mini" :class="handleTagStyle(row.prohibitionDate)" v-if="row.prohibitionDate !== undefined">{{
                    row.prohibitionDate
                }}</el-tag>
                <span v-else> -- </span>
            </template>
            <template #insideDays="{ row }">
                <el-tag class="tag4" size="mini">{{ row.insideDays || 0 }}</el-tag>
            </template>
            <!-- <template #detail="{ row }">
                <a href="javascript:;" @click="handleFeedback(row, 'look')">详情</a>
            </template> -->
            <template #operation="{ row }">
                <a href="javascript:;" @click="handleBtnLook(row)">查看</a>
                <a href="javascript:;" @click="handleFeedback(row, 'add')">调整方案</a>
            </template>
        </RiskTable>

        <!-- 事件处理 -->
        <EventFeedback
            v-if="visible"
            :visible.sync="visible"
            :type="feedbackType"
            :overrunDetail="currentOverrun"
            @initFeedback="handleInitFeedback"
        />

        <!-- 事件处理、新增跟踪记录 -->
        <ManualEventRecord
            v-if="eventRecordVisible"
            :visible.sync="eventRecordVisible"
            :type="eventRecordType"
            :overrunDetail="currentManual"
            @initEventRecord="handleInitEventRecord"
        />

        <!-- 布局设置 -->
        <RiskTableLayout
            ref="risk-table-layout"
            :tableName="'TR_OVERRUN_EVENT'"
            :visible.sync="layoutDialog"
            :column="columns"
            :fixedColumns="fixedColumns"
            :resetNoSelectedFieldList="resetNoSelectedFieldList"
        />

        <!-- 静态报告详情 -->
        <StaticDetail v-if="staticVisible" :visible.sync="staticVisible" :resultId="resultId" :history="history" />
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table-plus.vue';
import { ColumnVO, DictVO, PageVO, TableConfigVO, VueObject } from '@/common/vo';
import { OverrunEventDTO, OverrunEventRepVO, OverrunEventVO } from './vo/disposal-center';
import API from './api/disposal-center';
import { downLoadFile } from '@/utils/request';
import BarChart from './disposal-center/bar-chart.vue';
import BarChart2 from './disposal-center/bar-chart2.vue';
import EventFeedback from './disposal-center/event-feedback.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions, dateFormat, numberFormat, thousandsFormat } from '@/utils/tools';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import XEUtils from 'xe-utils';
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';
import { ManualEventRepVO } from './vo/manual-processing';
import ManualEventRecord from './central-supervision/manual-processing/manual-event-record.vue';
import StaticDetail from '../components/static-detail.vue';

@Component({
    name: 'DisposalCenter',
    components: { RiskTable, BarChart, BarChart2, EventFeedback, RiskIconButton, RiskTableLayout, ManualEventRecord, StaticDetail },
})
export default class DisposalCenter extends Vue {
    thousandsFormat = thousandsFormat;
    // 超限事件分布
    adjustProgressPojo = {
        '1': '超3天未反馈',
        '2': '80%调整期',
        '3': '距调整期前2日',
        '4': '其他调整期内',
        '5': '未及时调整',
    };
    compareTextPojo: any = {
        '0': '>',
        '1': '<',
        '2': '≥',
        '3': '≤',
        '4': '=',
        '5': '≠',
        '6': ' ',
    };
    // 反馈情况
    feedbackStatusPojo = {
        '0': '待反馈',
        '1': '已反馈',
    };
    tableLoading: boolean = false;
    tableData: OverrunEventVO[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'overrunEventId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    columns: ColumnVO[] = [
        {
            type: 'checkbox', // 复选框
            // selectedAll: true, // 选中所有页
            fixed: 'left',
            align: 'center',
            width: 60,
        },
        {
            title: '编号',
            field: 'overrunEventId',
            fixed: 'left',
            minWidth: 100,
        },
        {
            title: '反馈情况',
            field: 'feedbackStatus',
            fixed: 'left',
            minWidth: 100,
            render: value => this.feedbackStatusPojo[value] || '--',
        },
        {
            title: '产品代码/名称',
            field: 'dictFundCodes',
            minWidth: 200,
            render: value => this.formatDictFundCodes(value),
        },
        {
            title: '合规条款',
            field: 'clauseCode',
            minWidth: 200,
        },
        {
            title: '条款来源',
            field: 'articeInfo',
            minWidth: 200,
        },
        {
            title: '系统配置条目',
            field: 'entryName',
            minWidth: 200,
        },
        {
            title: '估值日期',
            field: 'tradeDate',

            minWidth: 100,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '控制阈值',
            field: 'thresholdValue',
            align: 'left',
            minWidth: 120,
            render: (value, row) => (value != undefined ? this.compareTextPojo[row.compareType] + numberFormat(value, 2) : '--'),
        },
        {
            title: '计算值',
            field: 'result',
            minWidth: 120,
            render: value => (value != undefined ? numberFormat(value, 2) : '--'),
        },
        {
            title: '首次超限日期',
            field: 'ctDate',
            minWidth: 120,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '连续超限天数',
            field: 'prohibitionDate',
            minWidth: 120,
        },
        {
            title: '超限调整天数',
            field: 'insideDays',
            minWidth: 120,
        },
        {
            title: '超限事件分类',
            field: 'adjustProgerss',

            minWidth: 120,
            render: (value, record) => record.adjustProgerssName?.join(',') || '--',
        },
        {
            title: '超限原因概述',
            field: 'overrunInfo',
            minWidth: 230,
        },
        {
            title: '最新反馈日期',
            field: 'feedbackDate',
            minWidth: 120,
            render: value => dateFormat(value) || '--',
        },
        // {
        //     title: '调整计划',
        //     field: 'detail',
        //     minWidth: 100,
        // },
        {
            title: '操作',
            field: 'operation',
            fixed: 'right',
            width: 150,
            align: 'center',
        },
    ];
    showColumns: ColumnVO[] = [];
    fixedColumns: ColumnVO[] = [
        { title: '编号', field: 'overrunEventId' },
        { title: '操作', field: 'operation' },
    ];
    resetNoSelectedFieldList: ColumnVO[] = [
        { title: '反馈情况', field: 'feedbackStatus' },
        {
            title: '系统配置条目',
            field: 'entryName',
            minWidth: 200,
        },
        {
            title: '估值日期',
            field: 'tradeDate',
            minWidth: 100,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '首次超限日期',
            field: 'ctDate',
            minWidth: 120,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '最新反馈日期',
            field: 'feedbackDate',
            minWidth: 120,
            render: value => dateFormat(value) || '--',
        },
    ];
    tableKey: number = 0;

    searchParams: OverrunEventDTO = {
        fundProductCode: [], // 产品代码
        unit: '', // 超限天数单位
        prohibitionDate: '', // 超限天数
        prohibitionDateUnit: '2', // 超限天数单位(固定为大于等于，等后端修改，该查询字段可移除)
        adjustProgerss: [], // 超限事件分布
        eventStatus: '0', // 0-存量  1-历史(该页面只展示存量的了,等后端修改，该查询字段可移除)
    };
    paging: PageVO = { pageSize: 25, currentPage: 1, total: 0 };

    marqueeList: any[] = [
        // { productCode: '0012', productName: '产品123号', value: '11' },
        // { productCode: '0013', productName: '产品124号', value: '11' },
        // { productCode: '0014', productName: '产品125号', value: '11' },
        // { productCode: '0015', productName: '产品126号', value: '11' },
        // { productCode: '0012', productName: '产品123号', value: '11' },
        // { productCode: '0013', productName: '产品124号', value: '11' },
        // { productCode: '0014', productName: '产品125号', value: '11' },
        // { productCode: '0015', productName: '产品126号', value: '11' },
        // { productCode: '0012', productName: '产品123号', value: '11' },
        // { productCode: '0013', productName: '产品124号', value: '11' },
        // { productCode: '0014', productName: '产品125号', value: '11' },
        // { productCode: '0015', productName: '产品126号', value: '11' },
    ];

    overrunTotal: number = 0;

    // 待调整超限指标图表
    barData: any = {
        dimensions: ['product', '公募', '集合', '单一'],
        source: [
            // {
            //     product: '新增超限',
            //     公募: 10,
            //     集合: 10,
            //     单一: 10,
            //     sum: 30,
            // },
            // {
            //     product: '超三天未反馈',
            //     公募: 20,
            //     集合: 20,
            //     单一: 20,
            //     sum: 60,
            // },
            // {
            //     product: '调整期限80%',
            //     公募: 30,
            //     集合: 30,
            //     单一: 30,
            //     sum: 90,
            // },
            // {
            //     product: '距调整期前2日',
            //     公募: 40,
            //     集合: 40,
            //     单一: 40,
            //     sum: 120,
            // },
            // {
            //     product: '未及时调整',
            //     公募: 50,
            //     集合: 50,
            //     单一: 50,
            //     sum: 150,
            // },
            // {
            //     product: '其他调整期内',
            //     公募: 60,
            //     集合: 60,
            //     单一: 60,
            //     sum: 180,
            // },
        ],
    };
    // 超限天数分布图表
    barData2: any = {
        xData: ['1-5天', '6-10天', '11-15天', '15天以上'],
        // data: [10, 20, 30, 40],
        data: [],
    };

    fundStorage: any[] = [];
    unitStorage: DictVO[] = [
        { dictKey: '4', dictKeyName: '=' },
        { dictKey: '0', dictKeyName: '>' },
        { dictKey: '1', dictKeyName: '<' },
        { dictKey: '2', dictKeyName: '≥' },
        { dictKey: '3', dictKeyName: '≤' },
        // { dictKey: '5', dictKeyName: '<>' },
        // { dictKey: '6', dictKeyName: ' ' },
    ];
    adjustStorage: DictVO[] = [
        { dictKey: '1', dictKeyName: '超3天未反馈' },
        { dictKey: '2', dictKeyName: '80%调整期' },
        { dictKey: '3', dictKeyName: '距调整期前2日' },
        { dictKey: '5', dictKeyName: '未及时调整' },
        { dictKey: '4', dictKeyName: '其他调整期内' },
    ];

    eventStatusStorage: DictVO[] = [
        // { dictKey: '0', dictKeyName: '未发起' },
        // { dictKey: '1', dictKeyName: '调整中' },
        { dictKey: '0', dictKeyName: '存量' },
        // { dictKey: '2', dictKeyName: '已关闭' },
        { dictKey: '1', dictKeyName: '历史' },
    ];

    visible: boolean = false;
    feedbackType: string = ''; // add | look
    currentOverrun: any = {};
    layoutDialog: boolean = false;

    eventRecordVisible: boolean = false; // 事件记录
    eventRecordType: string = ''; // add | look | follow
    currentManual: ManualEventRepVO = {
        overrunEventId: 0,
        fundProductCode: [],
        thresholdValue: '',
        compareType: '',
        result: 0,
        prohibitionDate: 0,
        entryName: '',
        lastAdjustDate: '',
        articeInfo: '',
        clauseCode: '',
        tradeDate: '',
        investmentManager: '',
        triggerType: '',
        approveDate: '',
    };

    chartComponent: any[] = ['barchart', 'barchart2'];
    chartInstanceArr: any = [];

    resultId: any = '';
    history: any = '';
    staticVisible: boolean = false;

    // 已选项前置
    get computedFundStorage() {
        let arr = changeOptions(this.searchParams.fundProductCode, this.fundStorage, 'fundProductCode');
        return arr;
    }

    async mounted() {
        // 监听布局设置
        this.$watch(
            () => {
                return (this.$refs['risk-table-layout'] as VueObject).showColumns;
            },
            val => {
                this.showColumns = val && val.length ? val : this.columns;
                this.tableKey++;
            }
        );
        this.getOverrunEventList();
        this.fundStorage = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like', []);

        API.getAdjIndexChart().then((res: any) => {
            res.forEach(i => {
                i['product'] = i.overrunType;
                i['公募'] = i.pubPlacement;
                i['集合'] = i.collect;
                i['单一'] = i.sole;
                if (i.overrunType !== '新增超限') {
                    i['sum'] = Number(i.pubPlacement) + Number(i.collect) + Number(i.sole);
                } else {
                    i['sum'] = 0;
                }
            });
            this.barData.source = res;
            console.log(res, 'resres');

            this.overrunTotal = res
                .map(i => i.sum)
                .reduce((prev, cur) => {
                    return prev + cur;
                }, 0);
        });
        API.getQueryDayChart().then((res: any) => {
            let data = [];
            // const colors = ['#f9c27b', '#f6a438', '#f4b3bb', '#f56667'];
            const colors = ['#427f90', '#427f90', '#427f90', '#427f90'];
            res.forEach((i, index) => {
                data.push({ value: i, itemStyle: { color: colors[index] } });
            });
            this.barData2.data = data;
        });
        API.getProductList().then((res: any) => (this.marqueeList = res));

        // 监听size变化 重置chart大小
        await this.$nextTick();
        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
        window.addEventListener('resize', this.screenAdapter);
        // this.screenAdapter();
        window.addEventListener('message', this.refresh);
    }

    /**
     * 获取超限事件表格数据
     */
    getOverrunEventList(): void {
        this.tableLoading = true;
        API.getOverrunEventList({ ...this.searchParams, paging: this.paging })
            .then((res: OverrunEventRepVO) => {
                if (res && res.list) {
                    res.list.forEach(element => {
                        if (element.adjustProgerss && element.adjustProgerss.length) {
                            element.adjustProgerss = element.adjustProgerss.split(',');
                            let adjustProgerssName = [];
                            element.adjustProgerss.forEach(e => {
                                adjustProgerssName.push(this.adjustProgressPojo[e]);
                            });
                            element.adjustProgerssName = adjustProgerssName;
                        } else {
                            element.adjustProgerss = [];
                            element.adjustProgerssName = [];
                        }
                    });
                }
                this.tableData = res?.list;
                this.paging.total = res?.total;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    /**
     * 查询按钮事件
     */
    handleSearchClick() {
        this.paging.currentPage = 1;
        this.getOverrunEventList();
    }

    /**
     * 重置按钮事件
     */
    handleReset() {
        this.searchParams = {
            fundProductCode: [], // 产品代码
            unit: '', // 超限天数单位
            prohibitionDate: '', // 超限天数
            prohibitionDateUnit: '2', // 超限天数单位
            adjustProgerss: [], // 超限事件分布
            eventStatus: '0', // 0-存量  1-历史
            prohibitionDates: '',
        };
    }

    /**
     * 反馈事件
     */
    handleFeedback(row: any, type: string): void {
        if (row.approveType === '0' && type === 'look') {
            this.currentManual = row;
            this.eventRecordType = type;
            this.eventRecordVisible = true;
        } else {
            this.currentOverrun = row;
            this.feedbackType = type;
            this.visible = true;
        }
    }

    /**
     * 导出按钮事件
     */
    handleExport() {
        const overrunEventIds = (this.$refs['risk-table'] as any).checkRowKeys || [];

        downLoadFile({
            url: '/foreground/index/export',
            method: 'post',
            data: { ...this.searchParams, overrunEventIds },
            loading: true,
            loadingMsg: '正在准备导出，请稍后··· ···',
        });
    }

    /**
     * 连续超限天数 tag样式设置
     */
    handleTagStyle(value) {
        if (value <= 5) {
            return 'tag1';
        } else if (value < 10 && value > 5) {
            return 'tag2';
        } else if (value >= 10) {
            return 'tag3';
        } else {
            return 'tag-d';
        }
    }

    // 格式化产品代码
    private formatDictFundCodes(cellValue): string {
        let valueStr = XEUtils.map(cellValue, item => {
            if (item) {
                return item.dictKey + '(' + item.dictKeyName + ')';
            } else {
                return '--';
            }
        });
        return valueStr.toString();
    }

    /**
     * 动态设置单元格样式
     */
    cellStyle({ row, column }) {
        // if (column.property === 'adjustProgerss') {
        //     if (!row.adjustProgerss || !row.adjustProgerss.length) {
        //         return;
        //     }
        //     if (row.adjustProgerss.includes('5')) {
        //         return {
        //             backgroundColor: 'red',
        //         };
        //     } else if (row.adjustProgerss.includes('1') || row.adjustProgerss.includes('2') || row.adjustProgerss.includes('3')) {
        //         return {
        //             // 黄色
        //             backgroundColor: '#fefe1f',
        //         };
        //     } else if (row.adjustProgerss.includes('4')) {
        //         return {
        //             backgroundColor: 'white',
        //         };
        //     }
        // }
    }

    /**
     * 事件反馈
     */
    handleInitFeedback(data: any): void {
        API.initFeedback(data)
            .then((res: any) => {
                this.yh_message_success('提交成功!');
            })
            .finally(() => {
                this.visible = false;
                this.feedbackType = '';
                this.getOverrunEventList();
            });
    }

    /**
     * 产品联动表格事件
     * @param code 产品代码
     */
    handleProduct(code: string): void {
        if (!code) {
            this.yh_message_error('参数有误!');
            return;
        }
        this.handleReset();
        this.searchParams.fundProductCode = [code];
        this.getOverrunEventList();
    }

    handleBarClick(param): void {
        this.handleReset();
        this.searchParams.adjustType = param.name;
        this.searchParams.fundTpe = param.seriesName;
        this.getOverrunEventList();
    }

    handleBarClick2(param): void {
        this.handleReset();
        this.searchParams.prohibitionDates = param.name;
        this.getOverrunEventList();
    }

    handleBtnLook(obj: any): void {
        if (obj.approveType === '0') {
            this.handleFeedback(obj, 'look');
        } else {
            this.resultId = obj.resultId;
            this.history = obj.eventStatus === '2';
            this.staticVisible = true;
        }
        // const msg = {
        //     type: 'static-detail',
        //     path: `/lookStaticDetail?resultId=${obj.resultId}&history=${obj.eventStatus === '2'}`,
        //     title: `静态报告详情-${obj.resultId}`,
        // };
        // top.window.postMessage(msg, '*');
        // this.$emit('handelOperate', { record: obj, history: this.type === 'history', clickRecord: obj });
    }

    screenAdapter() {
        // const titleFontSize = ((this.$refs['barchart'] as any).offsetWidth / 100) * 5.6;
        // // 分辨率变化图表配置
        // const adapterOption = {
        //     axisLabel: {
        //         textStyle: {
        //             fontSize: titleFontSize,
        //         },
        //     },
        //     // 柱状条目
        //     series: [
        //         {
        //             // barWidth: titleFontSize,
        //             // 条目文字配置
        //             // itemStyle: {
        //             //   barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
        //             // }
        //         },
        //     ],
        // };
        this.chartInstanceArr.forEach(ele => {
            // ele.setOption(adapterOption);
            // (this.$refs as any)['already-statistics'].extension(ele);
            ele.resize();
        });
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';

#disposal-center {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    min-height: 700px;
    overflow-y: hidden;
    padding: 0 5px;

    .chart-bar {
        height: 35%;

        /deep/ .el-card__body {
            padding: 10px;
            height: 100%;
        }

        .marquee {
            // background-image: linear-gradient(to bottom, #edf8fd, #fef9f2);
            /deep/ .el-table {
                td,
                th {
                    padding: 3px 0 !important;
                }
            }
            table {
                width: 100%;
                height: 100%;

                /* 固定表头 */
                thead,
                tbody tr {
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                }

                /* 控制表格滑动 */
                tbody {
                    display: block;
                    height: calc(100% - 25px);
                    overflow-y: scroll;
                }

                /* 隐藏  y轴的滚动条，仍然可以上下滚动 */
                // tbody::-webkit-scrollbar {
                //     display: none;
                // }

                td {
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 13px;
                }

                .num {
                    color: #ba926f;
                    font-size: 12px;
                    font-weight: bolder;
                    cursor: pointer;
                }
            }
        }

        .bar {
            /deep/ .el-card__body {
                position: relative;
            }
        }
    }

    .search-bar {
        padding: 10px 0;
    }

    .flex {
        display: flex;
    }

    .flex1 {
        flex: 1;
    }

    .flex2 {
        flex: 2;
    }

    .flex3 {
        flex: 3;
    }

    .flex6 {
        flex: 6;
        margin: 0 5px;
    }

    .flex10 {
        flex: 5;
    }

    .flex12 {
        flex: 12;
        margin: 5px 0 5px 5px;
        text-align: center;
        display: flex;
        justify-content: right;
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
        /* white-space: nowrap; */

        .el-button--mini,
        .el-button--mini.is-round {
            padding: 6px 10px !important;
        }
    }

    .underline {
        text-decoration: none;
    }

    .title {
        // position: absolute;
        padding-bottom: 4px;
        border-bottom: 1px solid #ccc;
        > span {
            // padding-left: 25px;
            font-size: 16px;
            font-weight: bold;
        }
    }

    .title-right {
        // display: flex;
        // align-items: center;
        text-align: right;
        // position: absolute;
        // right: 1%;
        // top: 10px;
        > i {
            font-size: 22px;
            padding: 0 3px;
            cursor: pointer;
            color: #48c682;
        }

        // i:hover {
        //     color: #107fff;
        // }
        .total-num {
            margin-right: 20px;
            color: #333;
            // background-color: #578bec;
            padding: 5px 15px;
            font-size: 12px;
            font-weight: bolder;
            // background: url('../../../../pages/system-preserve/images/item-monitor-total.png');
            // background-size: 100% 30px;
            // background-repeat: no-repeat;
        }
        .export-button {
            margin: 0 10px;
            z-index: 10;
        }
        .el-button {
            border-radius: 9px;
            padding-top: 6px;
            padding-bottom: 6px;
        }
    }

    a {
        color: #578bec;
        padding: 0 5px;
    }
}

/deep/ .el-form-item {
    margin: 0;

    .el-form-item__label {
        color: #575757;
        padding: 0;
    }

    .el-form-item__content {
        .el-select--mini {
            width: 100%;
        }

        .el-date-editor.el-input {
            width: 100%;
        }

        .el-input-group {
            vertical-align: inherit;
            display: inline-table;
        }
    }
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    // width: calc(85% - 15px);
    width: 85%;
}
// /deep/ .el-select__tags .el-select__input {
//     margin-left: 0;
// }
/***  collapse-tags样式 ***/

.tag1,
.tag2,
.tag3,
.tag4,
.tag-d {
    color: #fff;
    width: 30px;
    text-align: center;
}
.tag1 {
    background-color: #fff0d9;
    color: rgb(255, 178, 64);
}
.tag2 {
    background-color: #fbe4cc;
    color: rgb(237, 120, 0);
}
.tag3 {
    background-color: #fadbd4;
    color: rgb(231, 77, 40);
}
.tag4 {
    background-color: #f1e9e2;
    color: rgb(187, 145, 111);
}
</style>
